<template>
  <div class="app-container">
    <!-- 条件查询区域开始 -->
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-row>
          <el-col :span="6">
            <el-form-item :label="$t('dictLayEntry.typeCode')" prop="typeCode">
              <jmash-select
                v-model="queryParams.typeCode"
                :placeholder="$t('dictEntry.typeCode')"
                :data="Dict.layoutDictType.values"
                @change="tableHooks.handleQuery()"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('dictLayEntry.dictCode')" prop="dictCode">
              <el-input
                v-model="queryParams.dictCode"
                :placeholder="$t('dictLayEntry.dictCodeRequired')"
                class="!w-[203px]"
                @keyup.enter="tableHooks.handleQuery()"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('dictLayEntry.enable')" prop="enable">
              <jmash-select
                v-model="queryParams.enable"
                :placeholder="$t('dictLayEntry.enableRequired')"
                :data="Dict.enableBiz.values"
                @change="tableHooks.handleQuery()"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="search-btn">
              <el-button type="primary" @click="tableHooks.handleQuery()">
                {{ $t("common.search") }}
              </el-button>
              <el-button @click="resetQuery()">{{ $t("common.reset") }}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="clear"></div>
    </div>
    <!-- 条件查询区域结束 -->

    <el-card shadow="never">
      <!-- 按钮开始 -->
      <template #header>
        <!-- 按钮开始 -->
        <el-row justify="space-between">
          <el-col :span="17">
            <el-button
              type="primary"
              v-hasPerm="['dict:dict_lay_entry:add']"
              @click="handleAdd"
            >
              {{ $t("common.add") }}
            </el-button>
            <el-button
              type="primary"
              v-hasPerm="['dict:dict_lay_entry:delete']"
              @click="tableHooks.deleteRecords()"
            >
              {{ $t("common.batchDelete") }}
            </el-button>
          </el-col>
          <el-col :span="7" class="container-float">
            <el-button
              plain
              type="primary"
              v-hasPerm="['dict:dict_lay_entry:import']"
              @click="uploadVisible = true"
            >
              {{ $t("common.import") }}
            </el-button>
            <el-button
              plain
              type="primary"
              v-hasPerm="['dict:dict_lay_entry:export']"
              @click="tableHooks.handleExport(t('dictLayEntry.name'))"
            >
              {{ $t("common.export") }}
            </el-button>
            <jmash-column-select
              v-model="tableLabel"
              label-name="dict/os-dict-lay-entry"
            />
          </el-col>
        </el-row>
      </template>
      <!-- 按钮结束 -->

      <!-- 表格开始 -->
      <jmash-table
        ref="multipleTableRef"
        row-key="dictId"
        :list-loading="listLoading"
        :data="tableData"
        :table-label="tableLabel"
        @selection-change="tableSelected"
        @sort-change="handleSort"
      >
        <!-- 字典类型编码 -->
        <template #typeCode="scope">
          <span>
            {{ Dict.layoutDictType.getValue(scope.data.row.typeCode) }}
          </span>
        </template>
        <!-- 字典父ID -->
        <template #parentId="scope">
          <span>
            {{ scope.data.row.parentId }}
          </span>
        </template>
        <!-- 排序 -->
        <template #listOrder="scope">
          <el-icon
            size="16"
            @click="tableHooks.handleMove(scope.data.row, false)"
          >
            <Bottom />
          </el-icon>
          <el-icon
            size="16"
            @click="tableHooks.handleMove(scope.data.row, true)"
          >
            <Top />
          </el-icon>
        </template>
        <!-- 是否启用 -->
        <template #enable="scope">
          <el-switch
            v-model="scope.data.row.enable"
            @change="
              tableHooks.enableRecord(scope.data.row, scope.data.row.enable)
            "
          />
        </template>
        <template #operation="scope">
          <span
            class="el-button-color"
            v-hasPerm="['dict:dict_lay_entry:add']"
            @click="handleAddChild(scope.data.row)"
          >
            {{ $t("common.add") }}
          </span>
          <span
            class="el-button-color dropdown-left"
            v-hasPerm="['dict:dict_lay_entry:update']"
            @click="handleEdit(scope.data.row)"
          >
            {{ $t("common.edit") }}
          </span>
          <span
            class="el-button-color dropdown-left"
            v-hasPerm="['dict:dict_lay_entry:delete']"
            @click="tableHooks.deleteRecord(scope.data.row)"
          >
            {{ $t("common.delete") }}
        </span>
        </template>
      </jmash-table>
    </el-card>
    <!-- 表格结束 -->
    <dict-lay-entry-edit
      v-if="dialogvisible"
      v-model="dialogvisible"
      :title="dialogtitle"
      :entity-key="entityKey"
      :parent-id="parentId"
      :type-code="queryParams.typeCode"
      @refresh="refresh"
      width="900px"
    />

    <jmash-import-upload
      v-if="uploadVisible"
      :upload-visible="uploadVisible"
      :template-title="$t('sysUser.templateDownload')"
      @template-down="tableHooks.downloadTemplate(t('dictLayEntry.name'))"
      @import-events="importExcel"
      @upload-closed="uploadClosed"
    />
  </div>
</template>
<script setup lang="ts">
import { type Ref, ref, reactive,onActivated } from "vue";
import { type TableColumn, type TableSort, useTableHooks } from "jmash-core";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import { useRoute } from "vue-router";
const route = useRoute();

import type {
  DictLayEntryReq,
  DictLayEntryModel,
  DictLayEntryKey,
} from "@/api/dict/os-dict-lay-entry/types";
import type { DictTypeImportReq } from "@/api/dict/os-dict-type/types";
import { dictLayEntryApi } from "@/api/dict/os-dict-lay-entry/index";

import { Dict } from "@/api/dict/dict";

import dictLayEntryEdit from "./edit.vue";

let tableLabel: Ref<TableColumn[]> = ref([
  {
    label: "dictLayEntry.dictName",
    prop: "dictName",
    width: "270",
    sortable: "custom",
    isColumn: true,
  },
  {
    label: "dictLayEntry.dictCode",
    prop: "dictCode",
    width: "160",
    sortable: "custom",
    isColumn: true,
  },
  {
    label: "dictLayEntry.typeCode",
    prop: "typeCode",
    width: "160",
    sortable: "custom",
    slotName: "typeCode",
    columnType: "slot",
    isColumn: true,
  },
  {
    label: "dictLayEntry.description",
    prop: "description",
    sortable: "custom",
    isColumn: true,
  },
  {
    label: "dictLayEntry.listOrder",
    prop: "listOrder",
    width: "100",
    sortable: "custom",
    slotName: "listOrder",
    columnType: "slot",
    isColumn: true,
  },
  {
    label: "dictLayEntry.enable",
    prop: "enable",
    width: "110",
    sortable: "custom",
    slotName: "enable",
    columnType: "slot",
    isColumn: true,
  },
  {
    label: "common.operate",
    width: "150",
    slotName: "operation",
    columnType: "slot",
    fixed: "right",
    isColumn: true,
  },
]);

const queryParams = ref<DictLayEntryReq>({});

const {
  tableHooks,
  multipleTableRef,
  queryFormRef,
  listLoading,
  tableData,
  total,
} = useTableHooks(t, dictLayEntryApi, queryParams);

//新增编辑标题
const dialogtitle = ref("");
//新增编辑是否可见
const dialogvisible = ref(false);

//上传弹窗是否可见
const uploadVisible = ref(false);

let entityKey = reactive<DictLayEntryKey>({});
let parentId = ref<string>();
// 新增
function handleAdd() {
  entityKey = reactive<DictLayEntryKey>({});
  dialogtitle.value = t("common.add");
  dialogvisible.value = true;
}

// 新增孩子
function handleAddChild(row: DictLayEntryModel) {
  entityKey = reactive<DictLayEntryKey>({});
  parentId.value = row.dictId;
  dialogtitle.value = t("common.add");
  dialogvisible.value = true;
}

// 编辑
function handleEdit(row: DictLayEntryModel) {
  entityKey.dictId = row.dictId;
  dialogtitle.value = t("common.edit");
  dialogvisible.value = true;
}

//重置
function resetQuery() {
  const typeCode = queryParams.value.typeCode;
  queryFormRef.value.resetFields();
  queryParams.value.typeCode = typeCode;
  //查询数据.
  tableHooks.getList();
}

//行选择
function tableSelected(value: DictLayEntryModel[]) {
  tableHooks.selectionRows.value = value;
}

//处理排序
function handleSort(sort: TableSort) {
  tableHooks.handleSort(sort.prop, sort.order);
}

/**
 * 从子组件传过来的事件，刷新列表
 *
 * @returns {void}
 */
function refresh(value: boolean) {
  if (value) {
    tableHooks.getList();
  }
}

// 关闭导入弹框
function uploadClosed() {
  uploadVisible.value = false;
}

//导入Excel.
function importExcel(val: DictTypeImportReq) {
  val.updateMask = "";
  tableHooks.importExcel(val).then((response: boolean) => {
    uploadVisible.value = false;
  });
}




//查询数据.
onActivated(() => {
  //加载业务数据.
  Dict.layoutDictType.useValues().then((data) => {
   if (route.query.typeCode) {
      queryParams.value.typeCode = route.query.typeCode as string;
      tableHooks.getList();
    } else if (data.length > 0) {
      queryParams.value.typeCode = data[0].key;
      tableHooks.getList();
    }
  });
});
</script>
